<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <link rel="shortcut icon" href="/static/1.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Chat Room Register</title>
</head>

<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<nav>
    <div class="nav-wrapper teal">
        <a href="#" class="brand-logo center">Register</a>
    </div>
</nav>
<div class="container">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row">
        <div class="col s4 offset-s4 ">
            <form class="col s12" method="post" action="{{ url_for('register') }}">
                <div class="row">
                    <div class="input-field col s12">
                        <input value="" id="username" type="text" class="validate" name="username">
                        <label class="active" for="username">Username</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input value="" id="password" type="password" class="validate" name="password">
                        <label class="active" for="password">Password</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input value="" id="confirm_pass" type="password" class="validate" name="confirm_pass">
                        <label class="active" for="confirm_pass">Confirm Password</label>
                    </div>
                </div>
                <a href="/">Login</a>
                <button id="submit" class="btn waves-effect waves-light teal z-depth-3 right" type="submit"
                        name="action">Register
                </button>
            </form>
        </div>
    </div>
</div>

<!--alerts-->
{% with errors = get_flashed_messages(category_filter=["duplicated_user_error"]) %}
{% if errors %}
<script>
    alert("User already exist!");
</script>
{% endif %}
{% endwith %}

{% with errors = get_flashed_messages(category_filter=["pass_notmatch_error"]) %}
{% if errors %}
<script>
    alert("Password not match!");
</script>
{% endif %}
{% endwith %}

{% with errors = get_flashed_messages(category_filter=["no_user_error"]) %}
{% if errors %}
<script>
    alert("No such user, please register first!");
</script>
{% endif %}
{% endwith %}

<!--button enable-->
<script>
    let inp = document.querySelector('#username');
    let passinp = document.querySelector('#password');
    let confinp = document.querySelector('#confirm_pass');
    let btn = document.querySelector('#submit');
    setInterval(function () {
        if (inp.value && passinp.value && confinp) {
            btn.classList.remove('disabled');
        } else {
            if (!btn.classList.contains('disabled')) {
                btn.classList.add('disabled');
            }
        }
    }, 300);
</script>
</body>
</html>